<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkField(txtId,spanId,rexp,errorInfo){
            //得到文本框对象
            var txtObj = document.getElementById(txtId);
            var spanObj = document.getElementById(spanId);
            //验证文本框内容是否匹配正则表达式
            if(rexp.test(txtObj.value)){
                spanObj.innerHTML = "验证通过";
                spanObj.style.color = "green";
                return true;
            }
            else{
                spanObj.innerHTML = errorInfo;
                spanObj.style.color = "red";
                return false;
            }
        }

        function checkName(){
            return checkField("userName","nameSpan",
                /^[a-zA-Z\u4e00-\u9fa5]{2,}$/,"用户名必须是2位以上的字母或汉字");
        }

        function checkPhone(){
            return checkField("phone","phoneSpan",
                /^1[35789]\d{9}$/,"电话为13、15、17、18、19开始的11位数");
        }

        function checkEmail(){
            return checkField("email","emailSpan",
                /^\w{3,}@\w{2,}[.](com|cn|net)$/,"邮箱格式为XX@XX.com" );
        }

        function submitForm(){
            if(checkName() & checkPhone() & checkEmail()){
                var formObj = document.getElementById("f1");
                //提交表单
                formObj.submit();
            }
        }

        const  a = 9;
    </script>
</head>
<body onclick="alert('body点中')">
    <form action="dd" id="f1">
        用户名：<input type="text" id="userName" name="userName" onblur="checkName()">
            <span id="nameSpan"></span><br>
        电话：<input type="text" id="phone" name="phone" onblur="checkPhone()">
            <span id="phoneSpan"></span><br>
        email：<input type="text" id="email" name="email" onblur="checkEmail()">
            <span id="emailSpan"></span><br>
        <input type="button" value="提交" onclick="submitForm()">
    </form>

    <img src="photo/b3.jpg" onclick="f1.submit()"><br>
    <a href="1.html">跳转</a><br>
    <input type="button" value="跳转" onclick="location.href = '1.html'">

    <div style="width: 300px;height: 200px;border: 1px solid #000000" onclick="alert('div点中')">
        <input type="button" value="确定" onclick="alert('button点中')">
    </div>
</body>
</html>